<template>
  <div ref="editor-box" :class="showModel"
       @mousedown="handleMousedown"
       @mouseup="handleMouseup"
       @mousemove="handleMousemove"
       class="editor-box" :style="{backgroundColor:hold?'transparent':'white'}" >
    <!-- 图片上传组件辅助-->

    <el-upload
      class="avatar-uploader"
      :action="serverUrl"
      name="file"
      :headers="header"
      :show-file-list="false"
      list-type="picture"
      :multiple="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload">
    </el-upload>

    <quill-editor
      v-show="!hold"
      :style="editorStyle"
      class="editor"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
    <div>
      <YButton  style="float: right" :icon="this.mouseConfig.allowMove?'el-icon-unlock':'el-icon-rank'" @click="handleAllowMove" >移动</YButton>
      <YButton style="float: right" icon="el-icon-view" @click="handleShow" v-show="hold" >显示</YButton>
      <YButton style="float: right" icon="el-icon-circle-close" @click="handleHold" v-show="!hold" >隐藏</YButton>
      <YButton style="float: right" icon="el-icon-chat-dot-square" @click="handleSend" >发送</YButton>
    </div>

  </div>
</template>
<script>
  // 工具栏配置
  import {getToken} from "../../util/token";

  const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
    ["blockquote", "code-block"], // 引用  代码块
    [{ header: 1 }, { header: 2 }], // 1、2 级标题
    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
    [{ script: "sub" }, { script: "super" }], // 上标/下标
    [{ indent: "-1" }, { indent: "+1" }], // 缩进
    // [{'direction': 'rtl'}],                         // 文本方向
    [{ size: ["small", false, "large", "huge"] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    [{ font: [] }], // 字体种类
    [{ align: [] }], // 对齐方式
    ["clean"], // 清除文本格式
    ["link", "image", "video"] // 链接、图片、视频
  ];

  import { quillEditor } from "vue-quill-editor";
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  import YButton from "../button/YButton";

  export default {
    props: {
      /*编辑器的内容*/
      value: {
        type: String
      },
      /*图片大小*/
      maxSize: {
        type: Number,
        default: 4000 //kb
      },
      editorStyle:{},
      position:{
        type:String,
        default: "top"
      }
    },

    components: {
      YButton,
      quillEditor
    },

    data() {
      return {
        // 隐藏/显示
        hold:false,
        content: this.value,
        quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
        editorOption: {
          theme: "snow", //bubble 简易模式
          placeholder: "您想说点什么？",
          modules: {
            toolbar: {
              container: toolbarOptions,
              // container: "#toolbar",
              handlers: {
                image: function(value) {
                  if (value) {
                    // 触发input框选择图片文件
                    document.querySelector(".avatar-uploader input").click();
                  } else {
                    this.quill.format("image", false);
                  }
                },
              }
            }
          }
        },
        serverUrl: "/api/file/store", // 这里写你要上传的图片服务器地址
        header: {
          token: getToken()
        }, // 有的图片服务器要求请求头需要有token

        // 用于移动组件所需的一些变量
        mouseConfig:{
          allowMove:false,
          mouseDownX :0,
          mouseDownY :0,
          // 当左边不动时鼠标的x坐标
          leftMousedownX:0,
          initObjX:0,
          initObjY:0,
          flag:false,
          activeBorderColor:"teal",
        }
      };
    },

    methods: {
      handleMousedown(event){
        // 点击了移动按钮才可以动
        if(this.mouseConfig.allowMove){
          this.mouseConfig.mouseDownX=event.x
          this.mouseConfig.mouseDownY=event.y

          let box=this.$refs['editor-box'].getBoundingClientRect()
          this.mouseConfig.initObjX=box.x
          this.mouseConfig.initObjY=box.y

          // this.$refs['editor-box'].style.backgroundColor='black'
          this.$refs['editor-box'].style.border="5px solid "+this.mouseConfig.activeBorderColor
          this.$refs['editor-box'].style.opacity=1
          this.mouseConfig.flag=true
        }

      },
      handleMouseup(){
        if(this.mouseConfig.allowMove){
          this.$refs['editor-box'].style.border="none"
          this.$refs['editor-box'].style.opacity=0.8
          // this.$refs['editor-box'].style.backgroundColor='transparent'
          this.mouseConfig.flag=false
          this.mouseConfig.allowMove=false
        }

      },
      handleMousemove(e){

        if(this.mouseConfig.flag){
          let box=this.$refs['editor-box']
          // 鼠标当前坐标
          let mouseMoveX = e.pageX,mouseMoveY = e.pageY;
          // 鼠标偏移量
          let offsetX=parseInt(mouseMoveX) - parseInt(this.mouseConfig.mouseDownX)
          let offsetY=parseInt(mouseMoveY) - parseInt(this.mouseConfig.mouseDownY)
          // 防止移除屏幕外
          let readBox=this.$refs['editor-box'].getBoundingClientRect()

          // 移动x
          let offsetObjX=offsetX + parseInt(this.mouseConfig.initObjX)
          if(offsetObjX<0){
            offsetObjX=0
          }
          box.style.left =offsetObjX+'px'
          // 当左边不再移动时，开始缩小编辑器的宽度
          // if(offsetObjX===0){
          //   box.style.width=readBox.width+offsetX+'px'
          // }
          // 移动y
          let offsetObjY= offsetY + parseInt(this.mouseConfig.initObjY)
          if(offsetObjY<0){
            offsetObjY=0
          }
          box.style.top =offsetObjY+'px'

        }
      },
      // 点击发送按钮
      handleSend(){
        if(this.content){
          this.$emit("notice",this.content)
        }else{
          this.$message({
            type:'warning',
            message:"无内容",
            duration:1000
          })
        }

      },
      handleHold(){
        this.$message({
          type:'info',
          message:"再次点击按钮即可显示",
          duration:1000*4
        })
        this.hold=true
      },
      handleShow(){
        this.hold=false
      },
      handleAllowMove(){

        this.$notify({
          type:'info',
          message:"点击编辑框任意处即可拖动",
          duration:1000*4
        })
        this.mouseConfig.allowMove=true
      },
      onEditorBlur() {
        //失去焦点事件
      },
      onEditorFocus() {
        //获得焦点事件
      },
      onEditorChange() {
        //内容改变事件
        this.$emit("input", this.content);
      },

      // 富文本图片上传前
      beforeUpload() {
        // 显示loading动画
        this.quillUpdateImg = true;
      },

      uploadSuccess(res, file) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        let quill = this.$refs.myQuillEditor.quill;
        // 如果上传成功
        if (res.code === 200) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片  res.url为服务器返回的图片地址
          quill.insertEmbed(length, "image", res.result.url);
          // 调整光标到最后
          quill.setSelection(length + 1);
        } else {
          this.$message.error("图片插入失败");
        }
        // loading动画消失
        this.quillUpdateImg = false;
      },
      // 富文本图片上传失败
      uploadError() {
        // loading动画消失
        this.quillUpdateImg = false;
        this.$message.error("图片插入失败");
      }
    },
    computed:{
      showModel(){
        return this.position?this.position:"top"
      }
    }
  };
</script>

<style>
  .top{
    top: 0;
  }
  .bottom{
    bottom: 5px;
  }
  .editor-box{
    min-width: 100px;
    overflow: auto;
    position: fixed;
    opacity: 0.8;
    background-color: white;
    transition: border 0.5s;

  }
  .editor {
    line-height: normal !important;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode=video]::before {
    content: "请输入视频地址:";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体';
  }
</style>

